<template>
	<div class="topbar" v-show="$route.meta.showMenu!==false">
		<div class="nav">
			<ul>
				<li v-if="!this.$store.getters.getUser">
					<div style="margin-top:5px;font-size:16px">
						<router-link to="/login">登录</router-link>
					</div>
				</li>
				<div v-else><li class="header-user-con">
					<!-- 用户头像 -->
					<div class="user-avator">
						<img :src="this.$store.getters.getUser.avatar" />
					</div>
					<!-- 用户名下拉菜单 -->
					<div class="user-name">
						<el-dropdown>
							<span class="el-dropdown-link">
								{{this.$store.getters.getUser.accountName}}
								<i class="el-icon-caret-bottom"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<router-link to="/center">
									<el-dropdown-item>个人中心</el-dropdown-item>
								</router-link>
								<a @click="logout">
									<el-dropdown-item>退出登录</el-dropdown-item>
								</a>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</li>
				<li class="font">
					<router-link to="/order">我的订单</router-link>
				</li>
				<li class="font">
					<router-link to="/collect">我的收藏</router-link>
				</li>
				</div>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'Header',
		methods: {

			...mapActions(['setUser', 'setShoppingCart']),

			login() {
				this.$router.push({
					name: 'Login'
				})
			},

			// 退出登录
			logout() {
				// 清空本地登录信息
				localStorage.removeItem('user')
				localStorage.removeItem('token')
				// 清空vuex登录信息
				this.setUser('')
				this.$router.push({
					name: 'Home'
				})
				this.notifySucceed('登出成功')
			},

			//重定向
			register() {
				this.$router.push({
					name: 'Register'
				})
			},
		},
	}
</script>

<style>
	/* 顶部导航栏CSS */
	.topbar {
		height: 50px;
		min-width: 1240px;
		background-color: #303643;
	}

	.topbar .nav {
		width: 1225px;
		margin: 0 auto;
	}

	.topbar .nav ul {
		float: right;
	}

	.topbar .nav li {
		float: left;
		height: 50px;
		color: #b0b0b0;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
		margin-left: 20px;
	}

	.topbar .nav li.font {
		margin-top: 5px;
	}

	.topbar .nav li .router-link {
		margin-top: 5px;
	}

	.topbar .nav li .el-button {
		color: #b0b0b0;
	}

	.topbar .nav .el-button:hover {
		color: #fff;
	}

	.topbar .nav li a {
		color: #b0b0b0;
	}

	.topbar .nav a:hover {
		color: #fff;
	}

	.topbar .nav .shopCart {
		width: 120px;
		background: #424242;
	}

	.topbar .nav .shopCart:hover {
		background: #fff;
	}

	.topbar .nav .shopCart:hover a {
		color: #ff6700;
	}

	.topbar .nav .shopCart-full {
		width: 120px;
		background: #ff6700;
	}

	.topbar .nav .shopCart-full a {
		color: white;
	}

	/* 顶部导航栏CSS END */
</style>
